<template>
    <div style="margin-left: 180px;padding-top: 15px;background-color: white;width: 1175px;">
        <div style="background-color: #006bb7;height: 50px;line-height:50px">
            <span style="color: white;font-size: 20px;margin-left: 20px;">{{ nowTime }}</span>
            <span style="color: white;font-size: 25px;margin-left: 10px;">-</span>
            <span style="color: white;font-size: 20px;margin-left: 10px;">{{ weekAfterTime }}</span>
        </div>
        <div style="height: 40px;background-color: rgb(33, 13, 70);margin-top: 5px;display: flex;line-height: 40px;font-size: 10px;">
            <div style="color: white;margin-left: 30px;">时间</div>
            <div style="color: white;margin-left: 200px;">对阵</div>
            <div style="color: white;margin-left: 200px;">比分</div>
            <div style="color: white;margin-left: 200px;">预约数</div>
        </div>
        <div style="height: 30px;background-color: #638fcd;display: flex;line-height: 30px;">
            <div style="font-size: 10px;color: white;margin-left: 20px;">{{ dataList[0] }}</div>
        </div>
        <el-table :data="matchList0" stripe style="width: 100%" :show-header="false">
            <el-table-column prop="matchTimeSpot"  width="100" align="center"></el-table-column>
            <el-table-column prop="clueIdaName" width="150" align="right"></el-table-column>
            <el-table-column label="" width="40px">
                <template slot-scope="scope">
                    vs
                </template>
            </el-table-column>
            <el-table-column prop="clueIdbName" width="180"></el-table-column>
            <el-table-column prop="score" width="220px" ></el-table-column>
            <el-table-column prop="subscribeNum"></el-table-column>
        </el-table>
        <div style="height: 30px;background-color: #638fcd;display: flex;line-height: 30px;">
            <div style="font-size: 10px;color: white;margin-left: 20px;">{{ dataList[1] }}</div>
        </div>
        <el-table :data="matchList1" stripe style="width: 100%" :show-header="false">
            <el-table-column prop="matchTimeSpot"  width="100" align="center"></el-table-column>
            <el-table-column prop="clueIdaName" width="150" align="right"></el-table-column>
            <el-table-column label="" width="40px">
                <template slot-scope="scope">
                    vs
                </template>
            </el-table-column>
            <el-table-column prop="clueIdbName" width="180"></el-table-column>
            <el-table-column prop="score" width="220px" ></el-table-column>
            <el-table-column prop="subscribeNum"></el-table-column>
        </el-table>
        <div style="height: 30px;background-color: #638fcd;display: flex;line-height: 30px;">
            <div style="font-size: 10px;color: white;margin-left: 20px;">{{ dataList[2] }}</div>
        </div>
        <el-table :data="matchList2" stripe style="width: 100%" :show-header="false">
            <el-table-column prop="matchTimeSpot"  width="100" align="center"></el-table-column>
            <el-table-column prop="clueIdaName" width="150" align="right"></el-table-column>
            <el-table-column label="" width="40px">
                <template slot-scope="scope">
                    vs
                </template>
            </el-table-column>
            <el-table-column prop="clueIdbName" width="180"></el-table-column>
            <el-table-column prop="score" width="220px" ></el-table-column>
            <el-table-column prop="subscribeNum"></el-table-column>
        </el-table>
        <div style="height: 30px;background-color: #638fcd;display: flex;line-height: 30px;">
            <div style="font-size: 10px;color: white;margin-left: 20px;">{{ dataList[3] }}</div>
        </div>
        <el-table :data="matchList3" stripe style="width: 100%" :show-header="false">
            <el-table-column prop="matchTimeSpot"  width="100" align="center"></el-table-column>
            <el-table-column prop="clueIdaName" width="150" align="right"></el-table-column>
            <el-table-column label="" width="40px">
                <template slot-scope="scope">
                    vs
                </template>
            </el-table-column>
            <el-table-column prop="clueIdbName" width="180"></el-table-column>
            <el-table-column prop="score" width="220px" ></el-table-column>
            <el-table-column prop="subscribeNum"></el-table-column>
        </el-table>
        <div style="height: 30px;background-color: #638fcd;display: flex;line-height: 30px;">
            <div style="font-size: 10px;color: white;margin-left: 20px;">{{ dataList[4] }}</div>
        </div>
        <el-table :data="matchList4" stripe style="width: 100%" :show-header="false">
            <el-table-column prop="matchTimeSpot"  width="100" align="center"></el-table-column>
            <el-table-column prop="clueIdaName" width="150" align="right"></el-table-column>
            <el-table-column label="" width="40px">
                <template slot-scope="scope">
                    vs
                </template>
            </el-table-column>
            <el-table-column prop="clueIdbName" width="180"></el-table-column>
            <el-table-column prop="score" width="220px" ></el-table-column>
            <el-table-column prop="subscribeNum"></el-table-column>
        </el-table>
        <div style="height: 30px;background-color: #638fcd;display: flex;line-height: 30px;">
            <div style="font-size: 10px;color: white;margin-left: 20px;">{{ dataList[5] }}</div>
        </div>
        <el-table :data="matchList5" stripe style="width: 100%" :show-header="false">
            <el-table-column prop="matchTimeSpot"  width="100" align="center"></el-table-column>
            <el-table-column prop="clueIdaName" width="150" align="right"></el-table-column>
            <el-table-column label="" width="40px">
                <template slot-scope="scope">
                    vs
                </template>
            </el-table-column>
            <el-table-column prop="clueIdbName" width="180"></el-table-column>
            <el-table-column prop="score" width="220px" ></el-table-column>
            <el-table-column prop="subscribeNum"></el-table-column>
        </el-table>
        <div style="height: 30px;background-color: #638fcd;display: flex;line-height: 30px;">
            <div style="font-size: 10px;color: white;margin-left: 20px;">{{ dataList[6] }}</div>
        </div>
        <el-table :data="matchList6" stripe style="width: 100%" :show-header="false">
            <el-table-column prop="matchTimeSpot"  width="100" align="center"></el-table-column>
            <el-table-column prop="clueIdaName" width="150" align="right"></el-table-column>
            <el-table-column label="" width="40px">
                <template slot-scope="scope">
                    vs
                </template>
            </el-table-column>
            <el-table-column prop="clueIdbName" width="180"></el-table-column>
            <el-table-column prop="score" width="220px" ></el-table-column>
            <el-table-column prop="subscribeNum"></el-table-column>
        </el-table>

    </div>
</template>

<script>
import matchApi from "@/api/match/match";
export default {
    

    data() {
        return {
            nowTime: '',
            weekAfterTime: '',
            matchList0: [],
            matchList1: [],
            matchList2: [],
            matchList3: [],
            matchList4: [],
            matchList6: [],
            matchList5: [],
            dataList:[],
            dateList:[],
        }
    },
    created() {
        this.fetchData()
        this.dataList = [...Array(7).keys()].map(days => {
        let t = new Date(Date.now() + 86400000 * days);
        let str = `${t.getFullYear()}年${t.getMonth() + 1}月${t.getDate()}日`;
        console.log('aa', str );    return str;
        });
        this.dateList = [...Array(7).keys()].map(days => {
        let t = new Date(Date.now() + 86400000 * days);
        let str = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
        console.log('aa', str );    return str;
        });
        this.timeData()
    },
    methods: {
        fetchData(){
            var time = new Date();
            this.nowTime = time.toLocaleDateString(); //获取当前日期
            this.weekAfterTime = new Date(time.setDate(time.getDate() + 6)).toLocaleDateString()
        },

        timeData(){
            matchApi.getMatchByTime(this.dateList[0])
            .then(response =>{
                this.matchList0 = response.data
            })
            matchApi.getMatchByTime(this.dateList[1])
            .then(response =>{
                this.matchList1 = response.data
            })
            matchApi.getMatchByTime(this.dateList[2])
            .then(response =>{
                this.matchList2 = response.data
            })
            matchApi.getMatchByTime(this.dateList[3])
            .then(response =>{
                this.matchList3 = response.data
            })
            matchApi.getMatchByTime(this.dateList[4])
            .then(response =>{
                this.matchList4 = response.data
            })
            matchApi.getMatchByTime(this.dateList[5])
            .then(response =>{
                this.matchList5 = response.data
            })
            matchApi.getMatchByTime(this.dateList[6])
            .then(response =>{
                this.matchList6 = response.data
            })

        }
        
    },
}
</script>

<style>
#app{
    /* background: #638fcd; */
    background: rgb(246, 246, 246);
    height: 100%;
    overflow: scroll;
  }
</style>